<section class="try-it py-8 px-16 pb-20 bg-zinc-900 overflow-hidden">
    <div class="container mx-auto ">
        <h2 class="text-2xl font-bold mb-4 text-lime-500">Try It Now</h2>
        <div class="flex gap-4">
            <div class="flex flex-col flex-1 gap-2">
                <div class="flex flex-col">
                    <label for="url-input" class="text-lime-500 font-bold text-xs">URL(s)</label>
                    <input
                        type="text"
                        id="url-input"
                        value="https://www.nbcnews.com/business"
                        class="border border-zinc-700 rounded px-4 py-0 bg-zinc-900 text-zinc-300"
                        placeholder="Enter URL(s) separated by commas"
                    />
                </div>
                <div class="flex gap-2">
                    <div class="flex flex-col">
                        <label for="threshold" class="text-lime-500 font-bold text-xs">Min Words Threshold</label>
                        <select
                            id="threshold"
                            class="border border-zinc-700 rounded px-4 py-1 bg-zinc-900 text-zinc-300"
                        >
                            <option value="1">1</option>
                            <option value="5">5</option>
                            <option value="10" selected>10</option>
                            <option value="15">15</option>
                            <option value="20">20</option>
                            <option value="25">25</option>
                        </select>
                    </div>
                    <div class="flex flex-col flex-1">
                        <label for="css-selector" class="text-lime-500 font-bold text-xs">CSS Selector</label>
                        <input
                            type="text"
                            id="css-selector"
                            class="border border-zinc-700 rounded px-4 py-0 bg-zinc-900 text-zinc-300 placeholder-lime-700"
                            placeholder="CSS Selector (e.g. .content, #main, article)"
                        />
                    </div>
                </div>
                <div class="flex gap-2">
                    <div class="flex flex-col">
                        <label for="extraction-strategy-select" class="text-lime-500 font-bold text-xs"
                            >Extraction Strategy</label
                        >
                        <select
                            id="extraction-strategy-select"
                            class="border border-zinc-700 rounded px-4 py-1 bg-zinc-900 text-zinc-300"
                        >
                            <option value="NoExtractionStrategy" selected>NoExtractionStrategy</option>
                            <option value="CosineStrategy">CosineStrategy</option>
                            <option value="LLMExtractionStrategy">LLMExtractionStrategy</option>
                        </select>
                    </div>
                    <div class="flex flex-col">
                        <label for="chunking-strategy-select" class="text-lime-500 font-bold text-xs"
                            >Chunking Strategy</label
                        >
                        <select
                            id="chunking-strategy-select"
                            class="border border-zinc-700 rounded px-4 py-1 bg-zinc-900 text-zinc-300"
                        >
                            <option value="RegexChunking">RegexChunking</option>
                            <option value="NlpSentenceChunking">NlpSentenceChunking</option>
                            <option value="TopicSegmentationChunking">TopicSegmentationChunking</option>
                            <option value="FixedLengthWordChunking">FixedLengthWordChunking</option>
                            <option value="SlidingWindowChunking">SlidingWindowChunking</option>
                        </select>
                    </div>
                </div>
                <div id = "llm_settings" class="flex gap-2 hidden hidden">
                    <div class="flex flex-col">
                        <label for="provider-model-select" class="text-lime-500 font-bold text-xs"
                            >Provider Model</label
                        >
                        <select
                            id="provider-model-select"
                            class="border border-zinc-700 rounded px-4 py-1 bg-zinc-900 text-zinc-300"
                        >
                            <option value="groq/llama3-70b-8192">groq/llama3-70b-8192</option>
                            <option value="groq/llama3-8b-8192">groq/llama3-8b-8192</option>
                            <option value="groq/mixtral-8x7b-32768">groq/mixtral-8x7b-32768</option>
                            <option value="openai/gpt-4-turbo">gpt-4-turbo</option>
                            <option value="openai/gpt-3.5-turbo">gpt-3.5-turbo</option>
                            <option value="openai/gpt-4o">gpt-4o</option>
                            <option value="anthropic/claude-3-haiku-20240307">claude-3-haiku</option>
                            <option value="anthropic/claude-3-opus-20240229">claude-3-opus</option>
                            <option value="anthropic/claude-3-sonnet-20240229">claude-3-sonnet</option>
                        </select>
                    </div>
                    <div class="flex flex-col flex-1">
                        <label for="token-input" class="text-lime-500 font-bold text-xs">API Token</label>
                        <input
                            type="password"
                            id="token-input"
                            class="border border-zinc-700 rounded px-4 py-0 bg-zinc-900 text-zinc-300"
                            placeholder="Enter Groq API token"
                        />
                    </div>
                </div>
                <div  class="flex gap-2">
                    <!-- Add two textarea one for getting Keyword Filter and another one Instruction, make both grow whole with-->
                    <div id = "semantic_filter_div" class="flex flex-col flex-1 hidden">
                        <label for="keyword-filter" class="text-lime-500 font-bold text-xs">Keyword Filter</label>
                        <textarea
                            id="semantic_filter"
                            rows="3"
                            class="border border-zinc-700 rounded px-4 py-0 bg-zinc-900 text-zinc-300 placeholder-zinc-700"
                            placeholder="Enter keywords for CosineStrategy to narrow down the content."
                        ></textarea>
                    </div>
                    <div id = "instruction_div" class="flex flex-col flex-1 hidden">
                        <label for="instruction" class="text-lime-500 font-bold text-xs">Instruction</label>
                        <textarea
                            id="instruction"
                            rows="3"
                            class="border border-zinc-700 rounded px-4 py-0 bg-zinc-900 text-zinc-300 placeholder-zinc-700"
                            placeholder="Enter instruction for the LLMEstrategy to instruct the model."
                        ></textarea>
                    </div>
                </div>
                <div class="flex gap-3">
                    <div class="flex items-center gap-2">
                        <input type="checkbox" id="bypass-cache-checkbox" />
                        <label for="bypass-cache-checkbox" class="text-lime-500 font-bold">Bypass Cache</label>
                    </div>
                    <div class="flex items-center gap-2">
                        <input type="checkbox" id="screenshot-checkbox" checked />
                        <label for="screenshot-checkbox" class="text-lime-500 font-bold">Screenshot</label>
                    </div>
                    <div class="flex items-center gap-2 hidden">
                        <input type="checkbox" id="extract-blocks-checkbox" />
                        <label for="extract-blocks-checkbox" class="text-lime-500 font-bold">Extract Blocks</label>
                    </div>
                    <button id="crawl-btn" class="bg-lime-600 text-black font-bold px-4 py-0 rounded">Crawl</button>
                </div>
            </div>

            <div id="loading" class="hidden">
                <p class="text-white">Loading... Please wait.</p>
            </div>
            <div id="result" class="flex-1  overflow-x-auto">
                <div class="tab-buttons flex gap-2">
                    <button class="tab-btn px-4 py-1 text-sm bg-zinc-700 rounded-t text-lime-500" data-tab="json">
                        JSON
                    </button>
                    <button
                        class="tab-btn px-4 py-1 text-sm bg-zinc-700 rounded-t text-lime-500"
                        data-tab="cleaned-html"
                    >
                        Cleaned HTML
                    </button>
                    <button class="tab-btn px-4 py-1 text-sm bg-zinc-700 rounded-t text-lime-500" data-tab="markdown">
                        Markdown
                    </button>
                    <button class="tab-btn px-4 py-1 text-sm bg-zinc-700 rounded-t text-lime-500" data-tab="media">
                        Medias
                    </button>
                    <button class="tab-btn px-4 py-1 text-sm bg-zinc-700 rounded-t text-lime-500" data-tab="screenshot">
                        Screenshot
                    </button>
                </div>
                <div class="tab-content code bg-zinc-900 p-2 rounded h-full border border-zinc-700 text-sm">
                    <pre class="h-full flex"><code id="json-result" class="language-json"></code></pre>
                    <pre class="hidden h-full flex"><code id="cleaned-html-result" class="language-html"></code></pre>
                    <pre class="hidden h-full flex"><code id="markdown-result" class="language-markdown"></code></pre>
                    <pre class="hidden h-full flex"><code id="media-result" class="language-json"></code></pre>
                    <pre class="hidden h-full flex"><code id="screenshot-result"></code></pre>
                </div>
            </div>

            <div id="code_help" class="flex-1  overflow-x-auto">
                <div class="tab-buttons flex gap-2">
                    <button class="code-tab-btn px-4 py-1 text-sm bg-zinc-700 rounded-t text-lime-500" data-tab="curl">
                        cURL
                    </button>
                    <button
                        class="code-tab-btn px-4 py-1 text-sm bg-zinc-700 rounded-t text-lime-500"
                        data-tab="library"
                    >
                        Python
                    </button>
                    <button
                        class="code-tab-btn px-4 py-1 text-sm bg-zinc-700 rounded-t text-lime-500"
                        data-tab="python"
                    >
                        REST API
                    </button>
                    <!-- <button
                        class="code-tab-btn px-4 py-1 text-sm bg-zinc-700 rounded-t text-lime-500"
                        data-tab="nodejs"
                    >
                        Node.js
                    </button> -->
                </div>
                <div class="tab-content result bg-zinc-900 p-2 rounded h-full border border-zinc-700 text-sm">
                    <pre class="h-full flex relative overflow-x-auto">
                        <code id="curl-code" class="language-bash"></code>
                        <button class="absolute top-2 right-2 bg-zinc-700 text-white px-2 py-1 rounded copy-btn" data-target="curl-code">Copy</button>
                    </pre>
                    <pre class="hidden h-full flex relative overflow-x-auto">
                        <code id="python-code" class="language-python"></code>
                        <button class="absolute top-2 right-2 bg-zinc-700 text-white px-2 py-1 rounded copy-btn" data-target="python-code">Copy</button>
                    </pre>
                    <pre class="hidden h-full flex relative overflow-x-auto">
                        <code id="nodejs-code" class="language-javascript"></code>
                        <button class="absolute top-2 right-2 bg-zinc-700 text-white px-2 py-1 rounded copy-btn" data-target="nodejs-code">Copy</button>
                    </pre>
                    <pre class="hidden h-full flex relative overflow-x-auto">
                        <code id="library-code" class="language-python"></code>
                        <button class="absolute top-2 right-2 bg-zinc-700 text-white px-2 py-1 rounded copy-btn" data-target="library-code">Copy</button>
                    </pre>
                </div>
            </div>
        </div>
    </div>
</section>
